<style>
    .type-btn{margin-left:15px;padding: .54rem 1.2rem !important;height: 34px;line-height: 1.2;border-radius: .2rem;cursor: pointer;box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .065), 0 2px 2px 0 rgba(0, 0, 0, .065), 0 1px 5px 1px rgba(0, 0, 0, .065);border: 0}
    .active{color: #586cb1;border: 1px #586cb1 solid;}
    .content-box ul li {border: 1px #C0C0C0 solid;width: 7.5rem;text-align: center;float: left;line-height: 1.1;height: 2.6rem;margin-bottom: .2rem;border-radius: 5px;}
    .number-box span{font-size: 15px}
    .user-info-box span{font-size: 12px}
    .content-box ul{padding: 0;column-count: 10;column-gap: 0px;}
    .col-md-12{padding: 0 !important;}
    .content-box{background: #fff;padding-left: .8rem}
    .btn-box{background: #fff;text-align: center;padding: 20px;padding-top: 5px}
    .one-li{background: #44bb11;color: #fff}
    .two-li{background: #42A5F5;color: #fff}
    .three-li{background: #cc0000;color: #fff}
    .loadding{font-size: 20px;text-align: center;top:45%;color: #000;position: fixed;left: 53%;}
    .one-font{color: #00CC00}
    .two-font{color: #42A5F5}
    .three-font{color: #E53935}
    .content-box span font{margin-left: 10px}
    .help-span{color: #000;line-height: 2.5;font-size: 15px}
    .btn-type-box{margin-top: 10px}
    .navbar-fixed-top .content-wrapper{padding-top: 4.8rem !important;}
    .help-font{font-weight: 600}
    .status-span{line-height: 2.5;}
    .hover-span{border: 1px #4c60a3 solid !important;}
    .link-loadding{font-size: 20px;text-align: center;top:45%;color: #000;position: fixed;left: 53%;display: none}
</style>
<div class="body-box">
    <div class="content-box">
        <span class="help-span"><font class="help-font">提示：</font>白色:未选;<font class="one-font">绿色:已选;</font><font class="two-font">蓝色:临近到期;</font><font class="three-font">红色:已到期;</font></span>
        <ul class="content-ul">
            {{--@foreach($number as $key => $value)--}}
            {{--<li>--}}
                {{--<div class="number-box">--}}
                    {{--<span>{{ $value['number'] }}</span>--}}
                {{--</div>--}}
                {{--<div class="user-info-box">--}}
                    {{--<span class="name">张三</span><br>--}}
                    {{--<span class="days_remaining">剩余365天</span>--}}
                {{--</div>--}}
            {{--</li>--}}
            {{--@endforeach--}}
        </ul>
    </div>
    <div class="btn-box">
        <div class="btn-type-box">
            <button class="type-btn type-btn-1" data-id="1">D-01~10</button>
            <button class="type-btn type-btn-2" data-id="2">D-11~20</button>
            <button class="type-btn type-btn-3" data-id="3">D-21~30</button>
            <button class="type-btn type-btn-4" data-id="4">D-31~40</button>
            <button class="type-btn type-btn-5" data-id="5">D-41~50</button>
            <button class="type-btn type-btn-6" data-id="6">D-51~60</button>
            <button class="type-btn type-btn-7" data-id="7">D-61~70</button>
        </div>
        <div class="btn-type-box">
            <button class="type-btn type-btn-8" data-id="8">G-01~10</button>
            <button class="type-btn type-btn-9" data-id="9">G-11~20</button>
            <button class="type-btn type-btn-10" data-id="10">G-21~30</button>
            <button class="type-btn type-btn-11" data-id="11">G-31~40</button>
            <button class="type-btn type-btn-12" data-id="12">G-41~50</button>
            <button class="type-btn type-btn-13" data-id="13">G-51~60</button>
            <button class="type-btn type-btn-14" data-id="14">G-61~70</button>
        </div>
    </div>
</div>
<p class="loadding">
    正在加载中...
</p>

<p class="link-loadding">
    正在跳转中...
</p>
<script>
    var id = 1;

    $(function () {
        $(".content-header").remove();
        all(id);
        $(".type-btn-1").addClass("active");
    });

    $(".type-btn").click(function () {
        id = $(this).attr("data-id");

        $(".type-btn").removeClass("active");
        $(".type-btn-"+id).addClass("active");

        all(id);
    });

    function all(id) {
        $(".body-box").css("display", "none");
        $(".loadding").css("display","block");

        $.ajax({
            url: 'admin/numberList',
            type: 'get',
            dataType: 'json',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: {type: id},
            success: function (data) {
                $(".content-ul").empty();

                $.each(data, function (index, value) {
                    var html = '';
                    if (value.user_status == 1) {
                        html += '<li class="one-li content-li" data-type="2" data-id="'+value.user_id+'">';
                    } else if (value.user_status == 2) {
                        html += '<li class="two-li content-li" data-type="2" data-id="'+value.user_id+'">';
                    } else if (value.user_status == 3) {
                        html += '<li class="three-li content-li" data-type="2" data-id="'+value.user_id+'">';
                    } else {
                        html += '<li class="content-li" data-type="1" data-id="'+value.id+'">';
                    }

                    html += '<div class="number-box">';
                    if (value.user_status != 0) {
                        html += '<span>'+value.number+'</span>';
                    } else {
                        html += '<span class="status-span">'+value.number+'</span>';
                    }

                    html += '</div>';
                    html += '<div class="user-info-box">';
                    if (value.user_status != 0) {
                        html += '<span class="name">'+value.user_name+' 剩余'+value.days_remaining+'天</span>';
                    }

                    html += '</div>';
                    html += '</li>';

                    $('.content-ul').append(html);

                    $(".content-li").hover(function () {
                        $(this).addClass("hover-span");
                    },function () {
                        $(this).removeClass("hover-span");
                    });

                    $(".content-li").click(function () {
                        $(".body-box").css("display", "none");
                        $(".link-loadding").css("display", "block");

                        if ($(this).attr('data-type') == 1) {
                            window.location.href = "/admin/user/create?number_id="+$(this).attr('data-id');
                        } else {
                            window.location.href = "/admin/user/"+$(this).attr('data-id')+"/edit";
                        }

                        setTimeout(function () {
                            $(".body-box").css("display", "block");
                            $(".link-loadding").css("display", "none");
                        }, 2000);
                    });
                });

                $(".body-box").css("display", "block");
                $(".loadding").css("display","none");
            }
        });
    }


</script>
